<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <script src="js/vue.min.js"></script>
</head>

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <div class="box">
        <input type="text" v-model="n1">
        <select v-model="opt" name="" id="">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input v-model="n2" type="text" name="" id="">
        <input type="button" value="=" v-on:click="equal">
        <input type="text" v-model="result">

    </div>
    <script src="" async defer></script>
    <script>
        var ve = new Vue({
            el: ".box",
            data: {
                n1: 0,
                n2: 0,
                result: 0,
                opt: "+"
            },
            methods: {
                equal: function () {
                    if (this.opt === "+") {
                        this.result = parseInt(this.n1) + parseInt(this.n2);
                        console.log(this.n1)
                    }
                    if(this.opt === "-"){
                        this.result = parseInt(this.n1) - parseInt(this.n2);
                    }
                }
            }
        })
    </script>
</body>

</html>